<template>
	<view class="tui-container">
		<view class="tui-searchbox">
			<view class="tui-rolling-search" @tap="consult_search">
				<s-icon name="sousuo" color="#999" :size="44" unit="rpx"></s-icon>
				<swiper vertical autoplay circular interval="8000" class="tui-swiper">
					<swiper-item  class="tui-swiper-item">
						<view class="tui-hot-item">{{$s.config.getConfig('PleaseSearchInformation')}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="top"></view>
		<!--banner-->
		<swiper v-if="baner_list.length>0" indicator-dots autoplay circular :interval="5000" :duration="150" indicator-color="rgba(255, 255, 255, 0.9)"
		 indicator-active-color="#5677fc" class="tui-banner-swiper">
			<swiper-item v-for="(item,index) in baner_list" :key="index" @tap="baner_click(item)">
				<image :src="item.image_url" class="tui-slide-image" mode="widthFix" />
			</swiper-item>
		</swiper>
		<!--新闻列表-->
		<view class="tui-news-view"> 
			<block v-for="(item,index) in consult_list" :key="index">
				<s-list-cell :index="index" @tap="consult_detail(item.id)">
					<view class="tui-news-flex" :class="item.images_arr.length>1 ? 'tui-flex-column':'tui-flex-start'">
						<view class="tui-news-picbox" :class="[item.images_arr.length>1?'tui-w-full':'tui-w220 tui-h165',item.images_arr.length>1?'tui-flex-between':'']" v-if="item.images_arr.length>0">
							<block v-for="(it,ind) in item.images_arr" :key="ind">
								<image :src="it" mode="widthFix" class="tui-block"  :class="[item.images_arr.length==3?'tui-one-third':'',item.images_arr.length==1?'tui-w-full':'',item.images_arr.length==2?'tui-one-three':'']"></image>
							</block>
						</view>
						<view class="tui-news-tbox tui-flex-column tui-flex-between" :class="[item.images_arr.length==1?'tui-h165 tui-pl-20':'']">
							<view class="tui-news-title tui-pt20">{{item.title}}</view>
							<view class="tui-sub-box tui-pt20">
								<view class="tui-sub-source">作者：{{item.author}}</view>
								<view class="tui-sub-cmt">
									<view>阅读量{{item.reading_quantity}}</view>
								</view> 
							</view>
						</view>
					</view>
				</s-list-cell>
			</block>
		</view>
		<s-no-data v-if="consult_list.length<=0&&moreData===false" :imgUrl="$s.config.getConfig('NoDataImgUrlA')">
			{{$s.config.getConfig('NoDataTitle')}}
		</s-no-data>
		<s-loadmore v-if="moreData"></s-loadmore>
		<s-nomore v-if="consult_list.length>0&&moreData===false"></s-nomore>
		<s-scroll-top :scrollTop="scrollTop"></s-scroll-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				paging:null,
				moreData:true, 
				consult_list:[],//咨询列表
				baner_list:[] //轮播图
			}
		},
		async onLoad(){
			await this._onLoad();
		},
		methods: {
			//默认方法
			async _onLoad(){
				this.baner_list = await this.$s.model.consult.getConsultBanner()
				await this.getConsult()
				await this.$s.model.cart.getCartSum()
			}, 
			async getConsult(){
				const paging =  this.$s.model.consult.getConsult()
				this.paging = paging
				const res = await paging.getMoreData()
				if (!res) {
					return
				}
				this.consult_list = res.accumulator
				this.moreData = res.moreData
			},
			// 跳转baner详情
			async baner_click(item){
				if(item.the_jump == 0){
					return;
				}else if(item.the_jump == 1){
					return await this.$s.uniApi.navigateTo({url:'../out/out?url='+item.url});
				}else if(item.the_jump == 2){
					return await this.$s.uniApi.navigateTo({url:item.url});
				}else if(item.the_jump == 3){
					return await this.$s.uniApi.navigateTo({url:'../swiper_detail/swiper_detail?id='+item.id});
				}
			},
			//跳转列表详情
			async consult_detail(id){
				return await this.$s.uniApi.navigateTo({url:'../consult_detail/consult_detail?id='+id});
			},
			async consult_search(){
				return await this.$s.uniApi.navigateTo({url:'../consult_search/consult_search'});
			} 
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		//下拉刷新
		async onPullDownRefresh() {
			await this._onLoad()
			uni.stopPullDownRefresh()
		},
		//上拉加载更多
		async onReachBottom() {
			const res = await this.paging.getMoreData()
			if(!res){
				return
			}
			this.consult_list = res.accumulator
			this.moreData = res.moreData
		},
		// 分享
		onShareAppMessage(res) {
			return this.$s.uniApi.onShareAppMessage({path:'pages/consult/consult'})
		}
	}
</script>

<style lang="scss" scoped>
@import 'consult.scss';
</style>
